<template>
  <div class="app-container" v-loading="loading">
    <el-form
      :model="fileFormData"
      :inline="true"
      label-width="110px"
      ref="addP"
      :rules="addPrules"
    >
      <el-divider content-position="left">基础信息</el-divider>
      <el-row>
        <el-col :span="8">
          <el-form-item label="类型" prop="type">
            <span>
             {{ statue(fileFormData.type, types) }} 
              </span
            >
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="附件" prop="attachmentFileBsId">
            <div class="downloaDown">
              <!-- <div v-for="(item, index) in formData.fileFormData" :key="index"> -->
              <img
                class="excel"
                src="../../../assets/images/excel.png"
                alt=""
              />
              <span
                style="line-height: 30px; cursor: pointer; flex-shrink: 0"
                @click="getDownload()"
                >附件下载</span
              >
              <!-- </div> -->
            </div>
          </el-form-item>

        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="收件人" prop="receiverName">
            <span>{{ fileFormData.receiverName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="收件人邮箱" prop="receiverEmail">
            <span>{{fileFormData.receiverEmail}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="邮箱/钉钉标题" prop="subject">
            <span>{{fileFormData.subject}}
              </span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="状态" prop="status">
            <span>{{ statue(fileFormData.status, statusList) }} </span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建时间" prop="createTime">
            <span>{{ fileFormData.createTime }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="更新时间" prop="updateTime">
            <span>{{ fileFormData.updateTime }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
      <el-col>
          <el-form-item label="邮件内容" prop="content">
            <div v-html="fileFormData.content">
            </div>
          </el-form-item>
        </el-col>
      </el-row>  
      <el-row>
        <el-col>
          <el-form-item label="失败原因" prop="errMsg">
            <div v-html="fileFormData.errMsg">
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div style="height: 150px"
    ></div>
    <div class="submit_btn" style="z-index: auto">
      <div class="buttonBox">
        <el-button @click="cancel" :disabled="loading">返回</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {getInfo}from "@/api/common/email";
export default {
  mounted() {},
  name: "details",
  data() {
    return {
      types: [],
      statusList:[],
      loading: false,
      fileFormData: {
        fileInfo: [],
      },
    };
  },
  computed: {
    detail() {
      return this.$route.meta.detail;
    },
  },
  async created() {
    this.getDicts("email_type").then((res) => {
      this.types = res.data;
    });
    this.getDicts("send_email_status").then((res) => {
      this.statusList = res.data;
    });
    if (this.$route.params.id) {
      this.loading = true;
      getInfo(this.$route.params.id).then((res) => {
        this.loading = false;
        this.fileFormData = res.data;
      });
    }
  },
  methods: {
    //取消
    cancel() {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.go(-1);
    },
    //下载文件
    getDownload() {
      window.location.href = this.fileFormData.fileInfo[0].url;
    },
  },
};
</script>

<style lang="scss" scoped>
.divTabulation {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.divTabulation > P {
  margin-right: 5px;
}
::v-deep .cell {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.settlementPriceRange {
  width: 100%;
  height: 300px;
}
::v-deep .filter-tree {
  height: 64vh;
}
::v-deep .el-dialog__body {
  overflow: hidden;
}
::v-deep .el-upload-dragger {
  width: 70vh;
  margin: 0 auto;
}
::v-deep .el-step__description {
  margin-top: 10px;
}
::v-deep .el-divider__text {
  font-weight: 550;
  font-size: 15px;
}
.upload {
  margin-left: 40px;
}
.submit_btn {
  margin-top: 19px;
  position: sticky;
  display: flex;
  bottom: 0;
  justify-content: center;
}
::v-deep .hide-upload > div {
  display: none;
}
.reminder {
  color: red;
  margin-top: 10px;
  margin-left: 20px;
  font-size: 14px;
}
.downloaDown {
  display: flex;
  //flex-shrink: 0;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 5px;
  > span {
    margin-left: 10px;
  }
}
.excel {
  width: 30px;
  //margin-right: 5px;
}
</style>
